
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Topicopedia.net</title>

    <script src="bower_components/angular/angular.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="js/site.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="jumbotron.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body ng-app="site" ng-controller="SiteController">

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Topicopedia.net</a>
        </div>
        <div class="navbar-collapse collapse">
            <form class="navbar-form navbar-right" role="form">
                <div class="form-group">
                    <input type="text" placeholder="Email" class="form-control">
                </div>
                <div class="form-group">
                    <input type="username" placeholder="Username" class="form-control">
                </div>
                <div class="form-group">
                    <input type="password" placeholder="Password" class="form-control">
                </div>
                <button type="submit" class="btn btn-success" ng-click="loginUser()">Log in</button>
            </form>
        </div><!--/.navbar-collapse -->
    </div>
</div>

<!-- Main jumbotron for a primary marketing message or call to action -->
<div class="jumbotron">
    <div class="container">
        <h1>Topicopedia</h1>
        <p>Topic, derived from Greek, in current English means subject or item of learning; and the suffix -pedia means learning. Topicopedia is learning of topics or topics of learning.</p>
        <p><a class="btn btn-primary btn-lg" role="button" ng-click="getDemo()">Click to view demo &raquo;</a></p>
        <p><a class="btn btn-primary btn-lg" role="button" ng-click="getCreator()">Click to creator view demo &raquo;</a></p>
    </div>
</div>

<div class="container">
    <div class="row">
        <h2 class="text-center">Build your body of knowledge. Create as an individual or group.</h2>
    </div>
    <div class="row">
        <div class="col-md-3">
            <p class="text-center">Writers, artists, books, stories, sculpture and lots more.</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">History, politics, languages and more.</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Anatomy, organs, diseases, medicine and more..</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Earth, continents, weather and more.</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Animals, plants, environment, archaeology and more</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Physics, chemistry, astronomy, mathematics and more.</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Hockey, football, cricket and lots more.</p>
        </div>
        <div class="col-md-3">
            <p class="text-center">Computers, cars, airplanes and more</p>
        </div>
    </div>
    <div class="row">
        <hr>
    </div>
    <!-- Example row of columns -->
    <div class="row">
        <div class="col-md-4">
            <h2>For children</h2>
            <p>Topicopedia is designed to be an easy way for children to create their own encyclopedia. There are lots of topics. Topicopedia is populated through simple and easy to use forms.</p>
            <p>Their information is stored in one place and is accessible from anywhere, anytime and any platform They can even share it with friend s and classmates.</p>
            <p>All account holders are parents (or adults) and children can not use the share feature without their approval and knowledge. </p>
        </div>
        <div class="col-md-4">
            <h2>For groups and families</h2>
            <p>Groups of children can build their group knowledge by filling forms into a group account. Teachers or parents can review the pages and add comments.</p>
            <p>Parents can choose to connect their child's account with another group's account, making it possible for their child to share their topics with the group. </p>
        </div>
        <div class="col-md-4">
            <h2>For teachers and institutions</h2>
            <p>Are you an expert in a subject? Or centre of information? Create a takeaway using Topicopedia - a topic created for your users.</p>
            <p>Create and publish on the Topicopedia platform. Retain your audience! Extend your reach!</p>
        </div>
    </div>

    <hr>

    <footer>
        <p>&copy; Company 2014</p>
    </footer>
</div> <!-- /container -->


<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
